<template>
  <div class="add-user">
    <el-form :ref="forms" :model="forms" :rules="rules">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="forms.email" placeholder="邮箱" type="text"/>
      </el-form-item>
      <el-form-item label="姓名" prop="username">
        <el-input v-model="forms.username" placeholder="用户名" type="text"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="forms.password" placeholder="密码" type="password"/>
      </el-form-item>
      <el-form-item label="部门" prop="depart">
        <el-input v-model="forms.depart" placeholder="部门" type="text"/>
      </el-form-item>
      <el-form-item label="岗位" prop="station">
        <!--        <el-input type="text" v-model="forms.station" placeholder="岗位" />-->
        <el-select v-model="forms.station" placeholder="请选择">
          <el-option
              v-for="item in stations"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(forms)">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {addUser} from "@/utils/api";
import {postGetList} from "@/utils/post";

export default {
  name: "AddUser",
  data() {
    return {
      stations: [],
      forms: {
        email: "",
        username: "",
        password: "",
        depart: "",
      },
      rules: {
        // email: [
        //   {
        //     type: "email",
        //     required: true,
        //     message: "请输入正确的邮箱",
        //     trigger: "blur",
        //   },
        // ],
        // username: [
        //   {
        //     required: true,
        //     message: "请输入用户名",
        //     trigger: "blur",
        //   },
        //   {
        //     min: 2,
        //     max: 10,
        //     message: "长度在2到10个字符",
        //     trigger: "blur",
        //   },
        // ],
        // password: [
        //   {
        //     required: true,
        //     message: "请输入密码",
        //     trigger: "blur",
        //   },
        //   {
        //     min: 6,
        //     max: 20,
        //     message: "长度在6到20个字符",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  methods: {
    async fetchList() {
      const res = await postGetList({search: this.search})
      if (res.status === 'success') {
        this.stations = res.data.map((e) => {
          return {value: e.postName, label: e.postName}
        })
      }
    },

    onSubmit(forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          addUser(forms).then((response) => {
            if (response && response.status === "success") {
              this.$message.success(response.message);
            }
          });
        }
      });
    },
  },
  created() {
    this.fetchList()
  }
};
</script>

<style scoped>
.add-user {
  text-align: center;
}

.el-form {
  max-width: 400px;
  margin: 100px auto;
}
</style>